<template>
  <el-card class="box-card">
    <item-attribute-editor
      v-if="type === 'item'"
      :value="value"
      @input="handleInput"
    />
    <action-attribute-editor
      v-else-if="type === 'action'"
      :value="value"
      @input="handleInput"
    />
    <column-attribute-editor
      v-else-if="type === 'column'"
      :value="value"
      @input="handleInput"
    />
    <filter-attribute-editor
      v-else-if="type === 'filter'"
      :value="value"
      @input="handleInput"
    />
    <rule-attributes-editor
      v-else-if="type === 'rule'"
      :value="value"
      @input="handleInput"
    />
    <table-localize-attribute-editor
      v-else-if="type === 'table-localize'"
      :value="value"
      @input="handleInput"
    />
    <form-localize-attribute-editor
      v-else-if="type === 'form-localize'"
      :value="value"
      @input="handleInput"
    />
  </el-card>
</template>

<script>
import ItemAttributeEditor from "./attribute/ItemAttributeEditor.vue";
import ActionAttributeEditor from "./attribute/ActionAttributeEditor.vue";
import ColumnAttributeEditor from "./attribute/ColumnAttributeEditor.vue";
import FilterAttributeEditor from "./attribute/FilterAttributeEditor.vue";
import RuleAttributesEditor from "./attribute/RuleAttributesEditor.vue";
import TableLocalizeAttributeEditor from "./attribute/TableLocalizeAttributeEditor.vue";
import FormLocalizeAttributeEditor from "./attribute/FormLocalizeAttributeEditor.vue";
export default {
  components: {
    ItemAttributeEditor,
    ActionAttributeEditor,
    FilterAttributeEditor,
    ColumnAttributeEditor,
    RuleAttributesEditor,
    TableLocalizeAttributeEditor,
    FormLocalizeAttributeEditor
  },
  install(Vue) {
    Vue.component("AttributeEditor", this);
  },
  props: {
    value: {
      type: [Object, Array]
    },
    type: {
      type: String
    }
  },
  methods: {
    handleInput(value) {
      this.$emit("input", value);
    }
  }
};
</script>
